<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API测试页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
      }
      .error {
        border-color: #ff0000;
        background-color: #ffe6e6;
      }
      .success {
        border-color: #00cc00;
        background-color: #e6ffe6;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>API测试页面</h1>

    <button onclick="testUsersAPI()">测试用户列表API</button>
    <button onclick="testStatsAPI()">测试统计数据API</button>
    <button onclick="clearResults()">清空结果</button>

    <div id="results"></div>

    <script>
      function addResult(title, content, isError = false) {
        const results = document.getElementById('results')
        const div = document.createElement('div')
        div.className = `result ${isError ? 'error' : 'success'}`
        div.innerHTML = `
                <h3>${title}</h3>
                <pre>${typeof content === 'object' ? JSON.stringify(content, null, 2) : content}</pre>
            `
        results.appendChild(div)
      }

      function clearResults() {
        document.getElementById('results').innerHTML = ''
      }

      async function testUsersAPI() {
        try {
          addResult('📡 用户列表API测试', '开始请求...')

          const response = await fetch('/api/users?page=1&limit=5')
          addResult(
            `📡 HTTP状态`,
            `${response.status} - ${response.statusText}`
          )

          if (response.ok) {
            const data = await response.json()
            addResult('✅ 用户列表数据', data)
          } else {
            const errorText = await response.text()
            addResult('❌ 用户列表错误', errorText, true)
          }
        } catch (error) {
          addResult('💥 网络错误', error.message, true)
        }
      }

      async function testStatsAPI() {
        try {
          addResult('📊 统计数据API测试', '开始请求...')

          const response = await fetch('/api/users/stats')
          addResult(
            `📊 HTTP状态`,
            `${response.status} - ${response.statusText}`
          )

          if (response.ok) {
            const data = await response.json()
            addResult('✅ 统计数据', data)
          } else {
            const errorText = await response.text()
            addResult('❌ 统计数据错误', errorText, true)
          }
        } catch (error) {
          addResult('💥 网络错误', error.message, true)
        }
      }

      // 页面加载时自动测试
      window.onload = function () {
        addResult('🚀 页面加载完成', '准备测试API...')
      }
    </script>
  </body>
</html>
